<template>
  <div class="inspection-sidebar">
    <div class="header">
      <h3>巡检任务管理</h3>
      <button @click="showCreateForm = true">+ 新建任务</button>
    </div>

    <div class="task-list">
      <div
        v-for="task in tasks"
        :key="task.id"
        class="task-item"
        :class="task.status"
        @click="selectTask(task.id)"
      >
        <div class="task-info">
          <span class="task-name">{{ task.taskName }}</span>
          <span class="task-status">{{ task.status }}</span>
        </div>
        <div class="task-meta">
          <span>负责人：{{ task.assignee }}</span>
          <span>截止：{{ task.dueDate }}</span>
        </div>
      </div>
    </div>

    <inspection-create-form
      v-if="showCreateForm"
      @submit="handleCreateTask"
      @cancel="showCreateForm = false"
    />
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useProjectStore } from '@/stores/project'
import InspectionCreateForm from './InspectionCreateForm.vue'

export default {
  components: { InspectionCreateForm },
  props: ['projectId'],
  setup(props, { emit }) {
    const store = useProjectStore()
    const showCreateForm = ref(false)

    const tasks = computed(() =>
      store.inspections.filter((i) => i.projectId === props.projectId)
    )

    const selectTask = (taskId) => {
      emit('select-task', taskId)
    }

    const handleCreateTask = (newTask) => {
      store.createInspection(props.projectId, newTask)
      showCreateForm.value = false
    }

    return {
      tasks,
      showCreateForm,
      selectTask,
      handleCreateTask
    }
  }
}
</script>

<style scoped>
.inspection-sidebar {
  width: 300px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.task-item {
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.task-item:hover {
  background: white;
}

.task-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.task-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.task-item.已完成 .task-status::before {
  background: #27ab83;
}
.task-item.进行中 .task-status::before {
  background: #2c7be5;
}
.task-item.未开始 .task-status::before {
  background: #666;
}

.task-meta {
  font-size: 0.9em;
  color: #666;
  display: flex;
  justify-content: space-between;
}
</style>
